<template>
  <div class="setup-com-wrapper">
    <div>{{state.counter}}</div>
    <div>{{num}}</div>
    <div>
      <button @click="increment">增加</button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
export default {
  name: 'SetupCom',
  setup () {

    let state = reactive({
      counter: 10
    });

    let num = ref(33);
    const increment = () => {
      state.counter++;
      num.value++;
      console.log(state.counter);
      console.log(num.value);
    }

    return {
      state,
      num,
      increment
    }
  }
};
</script>

<style scoped>
.setup-com-wrapper {
  background-color: #ffffff;
  width: 100%;
  min-height: 40px;
  margin-bottom: 20px;
}
</style>
